<template>
  <section class='f-msg'>
    <van-sticky>
      <van-nav-bar class="f-msg-bar" title="消息中心">
        <template #left>
          <van-icon name="arrow-left" size="18" @click="pageBack" />
        </template>
        <template #right>
          <!-- <p style="color:#fff" @click="setMessageReadAll">全部已读</p> -->
        </template>
      </van-nav-bar>
    </van-sticky>

    <ul class="f-ul">
      <!-- <li class="f-card f-mt-15" @click="toDetail('供应商消息',4)">
        <div class="g-flex-ct">
          <img style="width:32px;height:32px" src="@/assets/icons/jhh_gys_head.png" alt="">
          <p class="f-ml-10">供应商消息</p>
        </div>
        <div class="g-flex-ct">
          <p style="color:#FF4249">{{form.supplierCount || ''}}</p>
          <van-icon class="f-ml-05" name="arrow" />
        </div>
      </li> -->
      <li class="f-card f-mt-15" @click="toDetail('系统消息',1)">
        <div class="g-flex-ct">
          <img style="width:32px;height:32px" src="@/assets/icons/jhh_msg_01.png" alt="">
          <p class="f-ml-10">系统消息</p>
        </div>
        <div class="g-flex-ct">
          <p style="color:#FF4249">{{form.systemCount || ''}}</p>
          <van-icon class="f-ml-05" name="arrow" />
        </div>
      </li>
      <li class="f-card f-mt-15" @click="toDetail('订单消息',3)">
        <div class="g-flex-ct">
          <img style="width:32px;height:32px" src="@/assets/icons/jhh_msg_02.png" alt="">
          <p class="f-ml-10">订单消息</p>
        </div>
        <div class="g-flex-ct">
          <p style="color:#FF4249">{{form.orderCount || ''}}</p>
          <van-icon class="f-ml-05" name="arrow" />
        </div>
      </li>
      <li class="f-card f-mt-15" @click="toDetail('商品消息',2)">
        <div class="g-flex-ct">
          <img style="width:32px;height:32px" src="@/assets/icons/jhh_msg_03.png" alt="">
          <p class="f-ml-10">商品消息</p>
        </div>
        <div class="g-flex-ct">
          <p style="color:#FF4249">{{form.goodsCount || ''}}</p>
          <van-icon class="f-ml-05" name="arrow" />
        </div>
      </li>
    </ul>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from './api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      form: {}
    })

    onMounted(() => {
      store.commit("setNavBar", {
        show: false,
      });

      getNewMessageCount()
    })

    const getNewMessageCount = () => {
      api.newMessageCount().then(res => {
        state.form = res.data
      })
    }

    const setMessageReadAll = () => {
      api.messageReadAll().then(res => {
        getNewMessageCount()
      })
    }

    const pageBack = () => {
      router.go(-1)
    };

    const toDetail = (name, type) => {
      router.push({
        path: '/msg/detail',
        query: {
          name,
          type
        }
      })
    }

    return {
      ...toRefs(state),
      toDetail,
      pageBack,
      setMessageReadAll
    }
  }
}
</script>
<style lang='scss' scoped>
.f-msg {
  padding-top: 0 !important;
  .f-msg-bar {
    padding-top: 27px;
    background: #000000;
  }
  .f-ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px;
    .f-card {
      width: 344px;
      height: 55px;
      background: #ffffff;
      box-shadow: 0px 2px 6px 0px rgba(0, 51, 119, 0.1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }
  }
}
</style>